*{
    margin:0;
    padding:0;
    list-style: none;
}
body,html{
    width:100%;
    height:100%;
    overflow: hidden;
}
.hide{
    visibility:hidden ;
    z-index:-1;
}
.show{
    visibility: visible ;
    z-index:1;
}
.box{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:radial-gradient(circle farthest-corner at left bottom,#f00 0%,#0f0 20%,#00f 40%,#ff0 60%,#f0f 80%,#0ff 100%);
    color:#fff;
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: space-around;
}
button{
    /* width:120px; */
    height:48px;
    border:none;
    outline: none;
    border-radius:25px;
    background:#f5f5f5;
    color:#333;
    font-weight:bold;
    font-size:24px;
    cursor:pointer;
    padding-left:30px;
    padding-right:30px;
}
button:hover{
    background:#e5e5e5;
}
button:active{
    background:#a6a6a6;
}
input{
    outline: none;
    border:none;
    background:#e5e5e5;
    padding:8px 15px;
    box-sizing: border-box;
    font-size:16px;
}
input::-webkit-input-placeholder{
    color:#a6a6a6;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#a6a6a6;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#a6a6a6;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:#a6a6a6;
}
input.warning::-webkit-input-placeholder{
    color:#f68f21;
}
input.warning::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#f68f21;
}
input.warning:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#f68f21;
}
input.warning:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:#f68f21;
}
input.error::-webkit-input-placeholder{
    color:#f00;
}
input.error::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#f00;
}
input.error:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#f00;
}
input.error:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:#f00;
}